<!DOCTYPE html>
<html>

	<head>
		<title>vueDemo1</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<span v-once>这个将不会改变: {{ msg }}</span>
			<p>Using mustaches:<span v-html="rawHtml"></p>
			<p v-html="rawHtml"></p>
			<div v-bind:class="color">test...</div>
			<p>{{num+1}}</p>
			<p>{{ok?'YES':'NO'}}</p>
			<p>{{ message.split('').reverse().join('') }}</p>

		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					msg: 1,
					rawHtml: '<span style = "color:red"> this is should be red</span>',
					color: 'blue',
					num: 10,
					ok:true,
					message:"vue"
				}
			});


			// vm.msg = "change first";
		</script>
		<style type="text/css">
			.red {
				color: red;
			}

			.blue {
				color: blue;
				font-size: 100px
			}
		</style>
	</body>

</html>
